<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">age++</button>

    <script>
        let obj = {
            name: '涛哥',
            age: 15,
            like: 'coding'
        }


        function girlFriend() {
            console.log('ok');
        }

        function viewUpdate() {
            console.log('视图更新');
        }

        // 代理机制
        let proxyObj = new Proxy(obj, {
            get: function (target, key, receiver) {  // 代理对象被访问时会触发
                // console.log('有人来访问我了');
                // return target[key]
                return Reflect.get(target, key, receiver)
            },
            set: function (target, key, value, receiver) {
                if (value !== target[key]) {
                    // target[key] = value
                    Reflect.set(target, key, value, receiver)
                    viewUpdate()
                }
            },
        })

        document.getElementById('btn').onclick = function () {
            // proxyObj.age++
            console.log(proxyObj.age);

        }
    </script>
</body>

</html>